<template>
  <div class="page_padding">
    <MyNavBar :title="title" @goback="goback" />
    <div class="content" v-if="queryInfo.type === '2'">
      <van-collapse v-model="activeNames" v-for="(item, i) in detailArray" :key="i">
        <van-collapse-item :name="item.id">
          <template #title>
            <div>
              <span class="collage_ttle">
                {{ watchDatas[i][0].title }}
                <div class="readTip" v-if="item.isRead === '0'">
                  <img src="../../assets/images/appraise/unfinsh.png" alt="" />
                </div>
              </span>
            </div>
          </template>
          <!-- 输入模块 -->
          <div class="entry">
            <div class="send" v-for="(items, i1) in watchDatas[i]" :key="i1">
              <TroubleShow :listData="items" :entry="false" :selfInfo="item" :launch="true"></TroubleShow>
            </div>
            <div class="suggest_box">
              <div class="suggest" v-for="(itemss, i2) in suggestListAll[i]" :key="i2">
                <TroubleShow :listData="itemss" :entry="false" :selfInfo="item.suggestList[i2]"></TroubleShow>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="content" v-if="queryInfo.type === '1' || queryInfo.type === '3'">
      <!-- 输入模块 -->
      <div class="entry" v-for="(item, i) in detailArray" :key="i">
        <div class="suggest_box">
          <div class="suggest" v-for="(itemss, i2) in suggestListAll[i]" :key="i2">
            <TroubleShow :listData="itemss" :entry="false" :selfInfo="item.suggestList[i2]"></TroubleShow>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" v-if="queryInfo.type === '1' || queryInfo.type === '3'">
      <div class="btn-detail" @click="checkDetailFlag = !checkDetailFlag">
        {{ checkWord }}
      </div>
    </div>
    <!-- 纪实详情 -->
    <div class="entry record" v-show="checkDetailFlag">
      <!-- 本周工作纪实 -->
      <!-- 本月工作小结 -->
      <div class="this_week" v-for="(item, index) in watchData" :key="index">
        <BoardSound :listData="item" :entry="false"></BoardSound>
      </div>
      <!-- 问题建议 -->
      <div class="suggestion_box">
        <div class="suggestion" v-for="(item, i) in suggestionList" :key="'a' + i">
          <div class="suggestion_info" v-for="(items, index) in item.suggestionData" :key="'b' + index">
            <BoardSimple
              :listData="items"
              :title="suggestionList.length > 1 ? i + 1 : ''"
              :entry="false"
              :showWord="true"></BoardSimple>
          </div>
          <div class="suggestion_annex" v-if="item.suggestionalbumList.length > 0">
            <div class="img_video">
              <ImgUpload v-bind:albumList.sync="item.suggestionalbumList" :entry="false" :showImg="false" />
            </div>
          </div>
        </div>
      </div>
      <!-- 图片 -->
      <div class="img_annex" v-if="albumList.length > 0">
        <div class="list_text_title">
          <span class="text">图片/视频/附件</span>
        </div>
        <ImgUpload :albumList="albumList" :entry="false" />
      </div>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import ImgUpload from '@com/ImgUpload'
import BoardSound from '@com/BoardSound'
import TroubleShow from '@com/TroubleShow'
import BoardSimple from '@com/BoardSimple'
import { getNoteSuggestDetail, getRecordDetailByPeriod } from '@api/api-documentary.js'
export default {
  name: 'replyDetail',
  props: {},
  components: {
    MyNavBar,
    ImgUpload,
    BoardSound,
    TroubleShow,
    BoardSimple,
  },
  data() {
    return {
      title: '纪实回复',
      checkWord: '查看纪实详情',
      queryInfo: '',
      allDatas: [],
      watchDatas: [],
      activeNames: [],
      suggestList: [],
      suggestListAll: [],
      suggestInfos: [],
      detailArray: [],
      // 纪实详情
      pageData: {},
      enclosureList: [],
      albumList: [],
      szsyalbumList: [],
      allData: [
        {
          id: 'workContent',
          title: '本周工作纪实',
          entryCont: '',
          audioList: [],
        },
        {
          id: 'plan',
          title: '下周工作计划',
          entryCont: '',
          audioList: [],
        },
        // {
        //   id: 'suggestion',
        //   title: '工作中的问题建议',
        //   entryCont: '',
        //   audioList: [],
        // },
      ],
      watchData: [],
      // 季度自评
      scoreOption: [],
      checkDetailFlag: false,
      suggestionList: [],
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.queryInfo = JSON.parse(this.$route.query.item)
    this.getNoteSuggestDetail()
    switch (this.queryInfo.type) {
      case '1':
        this.title = '纪实回复'
        break
      case '2':
        this.title = '问题建议'
        break
      case '3':
        this.title = '工作建议'
        break

      default:
        break
    }
  },
  watch: {
    allDatas: {
      // 数据变化时执行的逻辑代码
      handler(news, old) {
        this.watchDatas = news
      },
      // 开启深度监听
      deep: true,
    },
    allData: {
      // 数据变化时执行的逻辑代码
      handler(news, old) {
        this.watchData = news
      },
      // 开启深度监听
      deep: true,
    },
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    // 获取纪实回复详情
    getNoteSuggestDetail() {
      let that = this
      let param = {
        noteId: that.queryInfo.noteId,
        type: that.queryInfo.type,
      }
      getNoteSuggestDetail(param).then(res => {
        if (res.status === 200) {
          that.detailArray = res.data
          that.detailArray.forEach(item => {
            that.allDatas.push([
              {
                id: '',
                title: item.title,
                entryCont: item.content,
                audioList: item.contentVideo,
              },
            ])
            if (item.suggestList) {
              that.suggestList = []
              item.suggestList.forEach(({ replayContent, replayContentVideo }) => {
                that.suggestList.push({ entryCont: replayContent, audioList: replayContentVideo })
              })
              that.suggestListAll.push(that.suggestList)
            }
            if (item.isRead === '0') {
              that.activeNames.push(item.id)
            }
          })
          if (that.activeNames.length === 0) {
            that.activeNames.push(that.detailArray[0].id)
          }
          // if (that.queryInfo.type === '1') {
          switch (that.queryInfo.recordType) {
            case '01-02':
              // 月小结
              this.allData = [
                {
                  id: 'workContent',
                  title: '本月工作小结',
                  entryCont: '',
                  audioList: [],
                },
                {
                  id: 'plan',
                  title: '下月工作计划',
                  entryCont: '',
                  audioList: [],
                },
                {
                  title: '政治表现及学习情况',
                  entryCont: '',
                  id: 'politicalExhibition',
                  audioList: [],
                  placeholder: '请输入政治表现及学习情况',
                },
                {
                  title: '工作亮点及创新情况',
                  entryCont: '',
                  id: 'workPoint',
                  audioList: [],
                  placeholder: '请输入工作亮点及创新情况',
                },
                {
                  title: '主要不足及具体事例',
                  entryCont: '',
                  id: 'badExamples',
                  audioList: [],
                  placeholder: '请输入主要不足及具体事例',
                },
                {
                  title: '奖惩情况',
                  entryCont: '',
                  id: 'rewardsAndPunishments',
                  audioList: [],
                  placeholder: '请输入奖惩情况',
                },
              ]
              break
            case '01-03':
              // 科员季度自评
              this.allData = [
                {
                  title: '本季度个人工作汇总',
                  entryCont: '',
                  audioList: [],
                  id: 'workContent',
                },
                {
                  title: '教育培训情况',
                  entryCont: '',
                  id: 'politicalExhibition',
                  audioList: [],
                  placeholder: '教育培训情况',
                },
                {
                  title: '奖惩情况',
                  entryCont: '',
                  id: 'rewardsAndPunishments',
                  audioList: [],
                  placeholder: '请输入奖惩情况',
                },
              ]
              break
            default:
              this.allData = [
                {
                  id: 'workContent',
                  title: '本周工作纪实',
                  entryCont: '',
                  audioList: [],
                },
                {
                  id: 'plan',
                  title: '下周工作计划',
                  entryCont: '',
                  audioList: [],
                },
                // {
                //   id: 'suggestion',
                //   title: '工作中的问题建议',
                //   entryCont: '',
                //   audioList: [],
                // },
              ]
          }
          console.log(that.queryInfo.recordType)
          if (that.queryInfo.recordType === '01-03') {
            // 季度
            this.getJDInit(that.queryInfo.recordType)
          } else {
            // 周月
            this.getZYInit(that.queryInfo.recordType)
          }
          // }
        }
      })
    },

    getZYInit(style) {
      let that = this
      let params = {
        id: that.queryInfo.noteId,
        recordType: style,
        optionUserId: localStorage.userId,
        tenantId: localStorage.tenantId,
      }
      getRecordDetailByPeriod(params).then(res => {
        let data = res.data
        that.pageData = data
        that.allData.forEach(item => {
          item.entryCont = data[item.id]
          item.audioList = data[`${item.id}List`]
        })
        that.albumList = data.albumList
        that.albumList.push(...data.enclosureList)
        // 工作建议
        if (data.recordProblemList.length > 0) {
          let list = data.recordProblemList
          list.forEach(item => {
            that.suggestionList.push({
              suggestionData: [
                {
                  id: '',
                  title: '',
                  entryCont: item.content,
                  audioList: item.contentVideo,
                  isAt: true,
                  wordLimit: 300,
                },
              ],
              suggestionalbumList: item.enclosureList,
              suggestionId: item.id,
            })
          })
        } else {
          that.suggestionList.push({
            suggestionData: [
              {
                id: '',
                title: '',
                entryCont: '',
                audioList: [],
                isAt: true,
                wordLimit: 300,
              },
            ],
            suggestionalbumList: [],
            suggestionId: '',
          })
        }
      })
    },
    getJDInit(style) {
      let that = this
      let params = {
        id: that.queryInfo.noteId,
        recordType: style,
        optionUserId: localStorage.userId,
        tenantId: localStorage.tenantId,
      }
      getRecordDetailByPeriod(params).then(res => {
        let data = res.data
        that.pageData = res.data
        that.$nextTick(() => {
          that.scoreOption = res.data.indexOfQuarterList
        })
        that.allData.forEach(item => {
          item.entryCont = data[item.id]
          item.audioList = data[`${item.id}List`]
        })
        that.albumList = data.albumList
        that.albumList.push(...data.enclosureList)
        if (data.recordProblemList.length > 0) {
          let list = data.recordProblemList
          list.forEach(item => {
            that.suggestionList.push({
              suggestionData: [
                {
                  id: '',
                  title: '',
                  entryCont: item.content,
                  audioList: item.contentVideo,
                  isAt: true,
                  wordLimit: 300,
                },
              ],
              suggestionalbumList: item.enclosureList,
              suggestionId: item.id,
            })
          })
        } else {
          that.suggestionList.push({
            suggestionData: [
              {
                id: '',
                title: '',
                entryCont: '',
                audioList: [],
                isAt: true,
                wordLimit: 300,
              },
            ],
            suggestionalbumList: [],
            suggestionId: '',
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page_padding {
  overflow-x: hidden;
  .content {
    // padding: 0 16px;
    /deep/.van-collapse {
      .van-collapse-item {
        box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
        margin: 5px;
      }
      .van-collapse-item__content {
        padding: 0;
      }
      .collage_ttle {
        position: relative;
        display: inline-block;
        .readTip {
          position: absolute;
          top: -1px;
          right: -5px;
          width: 7px;
          height: 7px;
          display: flex;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .entry {
      background-color: #f0f0f0;
      padding: 8px;
      min-height: 100%;

      // 标题
      .list_text_title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
        .text {
          background-image: linear-gradient(#ffffff 50%, #f9f1e8);
        }
      }
      // 图片附件
      .img_annex {
        padding: 20px 16px 8px 16px;
        border-radius: 2px;
        background-color: #ffffff;
        margin-bottom: 10px;
        box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
      }
      // 文件附件
      .file_annex {
        padding: 20px 16px 8px 16px;
        border-radius: 2px;
        background-color: #ffffff;
        margin-bottom: 10px;
        box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
      }
    }
  }
  .footer {
    // font-size: 14px;
    padding: 15px;
    margin-top: 20px;
    position: relative;
    .btn-sub {
      color: #56462c;
      background-color: #0f61d5;
      padding: 5px 40px;
      border-radius: 5px;
      font-weight: bold;
      margin: auto;
      width: 120px;
      text-align: center;
      font-size: 16px;
    }
    .btn-detail {
      color: #02a7f0;
      position: absolute;
      bottom: 15px;
      right: 15px;
    }
  }
  .record {
    padding: 14px 6px;
    background-color: #efefef;
    // 问题建议
    .suggestion_box {
      box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
      margin-bottom: 10px;
      .suggestion {
        .suggestion_info {
          border-bottom: 1px solid #f0f0f0;
        }
        .suggestion_annex {
          background-color: #fff;
          // padding: 20px 5px 10px;
          // padding: 10px 0;

          .img_video {
            padding: 0 16px;
            border-bottom: 1px solid #f0f0f0;
          }

          // 文件上传
          .up_file {
            padding: 20px 16px 0 16px;
          }
        }
      }
    }
    // 标题
    .list_text_title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      margin-bottom: 20px;
      .text {
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
      }
    }
    // 图片附件
    .img_annex {
      padding: 20px 16px 8px 16px;
      border-radius: 2px;
      background-color: #ffffff;
      margin-bottom: 10px;
      box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    }
    // 文件附件
    .file_annex {
      padding: 20px 16px 8px 16px;
      border-radius: 2px;
      background-color: #ffffff;
      margin-bottom: 10px;
      box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    }
    // 双招双引
    .szsy_item {
      background-color: #ffffff;
      padding: 15px 0;
      margin-top: 10px;
      border-radius: 5px;
      .szsy_btn {
        margin-bottom: 20px;
        padding-left: 15px;
        position: relative;
        .van-switch {
          position: absolute;
          margin-top: 4px;
          margin-left: 15px;
        }
      }
      .szsy_box {
        background-color: #ffffff;
        padding: 0 15px;
        margin-top: 5px;
        border-radius: 7px;
        .szsy_annex {
          .img_video {
            padding-left: 0;
            .empty_text {
              font-size: 13px;
            }
          }
        }
      }
    }
    // 个人季度自评
    .evaluate {
      padding: 20px 16px;
      background-color: #fff;

      .score_select {
        background-color: #fff;
      }
    }
  }
}
</style>
